<template>
  <div class="content">
    <div class="progress-row">
      <div class="progress-label">标注进度：</div>
      <div class="progress-content">
        <mine-progress :percentage="percentage"></mine-progress>
      </div>
    </div>
    <div class="tips-row">
      <div class="tips-label">标注说明：</div>
      <div class="tips-content">请基于已有的标签，对每个图像进行情感分类。</div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未标注" name="first"></el-tab-pane>
      <el-tab-pane label="已标注" name="second"></el-tab-pane>
    </el-tabs>
    <undoPage ref="undoPage" v-show="activeName === 'first'" />
    <donePage ref="donePage" v-show="activeName === 'second'" />
  </div>
</template>
<script>
import { detailMixins } from '../../mixins.js';
import undoPage from './undoPage.vue';
import donePage from './donePage.vue';
export default {
  mixins: [detailMixins],
  components: {
    undoPage,
    donePage,
  },
  data () {
    return {
      percentage: 0,
      activeName: 'first'
    }
  },
  methods: {
    cancel () {
      window.history.go(-1);
    },
    handleClick () {
      if (this.activeName === 'first') {
        this.$nextTick(() => {
          this.$refs.undoPage.init();
        });
      } else if (this.activeName === 'second') {
        this.$nextTick(() => {
          this.$refs.donePage.init();
        });
      }
    },
    async getProcess() {
      const params = {
        id: this.calibrationId,
        finisher: this.finisher,
      };
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationSearchProgressByFinisher', params);
        const result = res.data || {};
        let percentage = 0;
        if (result.success) {
          const data = result.data || {};
          percentage = data.progress || 0;
        }
        this.percentage = parseFloat((percentage * 100).toFixed(2));
      } catch (e) {
        console.error(e);
      }
    },
    init () {
      this.getProcess();
      this.handleClick();
    }
  },
  mounted () {
    // 设置面包屑导航
    this.$store.commit('SET_BREADCRUMB', [
      { title: '接收的任务', path: '/tagList/mine' },
      { title: '任务详情', path: '' }
    ]);
    this.init();
  }
}
</script>
<style lang="less" scoped>
  .progress-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .progress-label {
      width: 100px;
    }
    .progress-content {
      width: 100%;
    }
  }
  .tips-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .tips-label {
      width: 100px;
    }
  }
</style>
